<template>
    <div class="home_sp">
        <div class="home_Top">
            <div class="home_Top_img" v-for="(item, index) in arrCon" :key="index">

                <RouterLink :to="{
                    name: 'xiangQing',
                    query: {
                        id: item.body.items[0].id
                    }
                }"><img :src="item.body.items[0].url" alt="" /></RouterLink>
                <div class="home_Top_img_text">{{ item.body.items[0].product_name }}</div>
                <div class="home_Top_img_text text1">下单立减20元</div>
                <div class="home_Top_img_text jg"><span class="youhuijia">优惠价￥</span>{{ item.body.items[0].product_price
                    }}</div>
            </div>
        </div>

    </div>
</template>
<script setup lang='ts'>
import { ref,  watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios';
let Rou = useRoute();
let arrCon = ref([]);
let imgSrc = 'https://apis.netstart.cn/xmsc/home/channel1_tab?page_id=14709&type=classification&block_id=3570989&id=69&page_size=40&page_index=' + Rou.query.id;
getCon(imgSrc)
watch(Rou, (val) => {
    let imgSrc = 'https://apis.netstart.cn/xmsc/home/channel1_tab?page_id=14709&type=classification&block_id=3570989&id=69&page_size=40&page_index=1' + val.query.id;
    getCon(imgSrc)
})


function getCon(url) {
    axios.get(url).then((res) => {
        arrCon.value = res.data.data.sections;
        
    })
}
</script>
<style scoped>
.home_sp {
    font-size: 0.11rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.home_Top{
    display: flex;
    flex-wrap: wrap;
}
.home_sp a {
    text-decoration: none;
}

.home_sp .home_Top img {
    width: 1.75rem;
    height: 1.75rem;
}

.home_Top_img {
    flex: 1;
    height: 2.6rem;
    width: 1.75rem;
    margin-top: 0.1rem;
    background-color: #fff;
    padding-top: 0.06rem;
    padding-left: 0.08rem;
    position: relative;

}

.home_Top_img_text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
 .text1{
    width: 0.7rem;
    color: #ff0000;
    border: 0.26667vw solid rgba(255,0,0,.5);
}
.jg {
    color: #ff0000;
    font-size: 0.16rem;
    position: absolute;
    bottom: 0;
}

.youhuijia {
    font-size: 0.12rem;
}

.text1 {
    text-align: end;
}
</style>